<!--  -->
<template>
  <div class="refund">
      <!-- <HeaderTop title="待发货"></HeaderTop> -->
      <div class="refund-container">
          <div class="refund-title">
              <img src="../../assets/img/pingjia.png" alt="">
              <p>待发货</p>
          </div>
          <div class="refund-address">
              <div class="address-top">{{orderInfo.receiverName}}<span>{{orderInfo.receiverPhone}}</span></div>
              <div class="address-bottom">{{orderInfo.receiverArea+orderInfo.receiverCity+orderInfo.receiverCounty+orderInfo.receiverAddress}}</div>
          </div>
          <div class="refund-goods">
              <h2>商品清单</h2>
              <div class="container">
                <ul class="collect_ul">
                    <li class="collect_item" v-for="(order,index) in orderDetail" :key="index">
                        <img :src="order.goodsImg" alt="">
                        <div class="title">
                            <h3>{{order.goodsName}}</h3>
                            <p class="size">50g<span>x{{order.goodsNum}}</span></p>
                            <p class="price">￥{{order.goodsPrice}}</p>
                        </div>
                    </li>
                </ul>
            </div>
          </div>
          <div class="refund-charge">
              <h2>费用明细</h2>
              <div class="cell">
                  <p>商品金额</p>
                  <p>￥{{orderInfo.itemAmountTotal}}</p>
              </div>
              <div class="cell">
                  <p>优惠券</p>
                  <p>-￥{{coupon}}</p>
              </div>
              <div class="cell">
                  <p>运费</p>
                  <p>￥{{orderInfo.espressFee}}</p>
              </div>
              <div class="pay">
                  <div class="paybt">实付款：<span>￥{{orderInfo.orderAmountTotal}}</span></div>
              </div>
          </div>
          <div class="refund-other">
              <div class="cell">
                  <p>订单编号</p>
                  <p class="time">{{orderInfo.orderNo}}</p>
              </div>
              <div class="cell">
                  <p>付款时间</p>
                  <p class="time">{{orderInfo.paidTime}}</p>
              </div>
              <div class="cancel-btn">
                  <button class="cancel" @click="cancelOrder">申请退款</button>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
export default {
  data () {
    return {
        orderDetail:[],
        orderInfo:{},
        coupon:null,
        userId:'',
        token:'',
        orderInfoId:''
    };
  },

//   components: {
//       HeaderTop
//   },

  computed: {
      ...mapState(['userInfo'])
  },
    async mounted(){
        this.orderInfoId = this.$route.query.id
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
        // console.log(orderInfoId,userId,token)
        const result = await this.API.reqOrderDetail({userId:this.userId,token:this.token,orderInfoId:this.orderInfoId})
        console.log(result.retData)
        this.orderDetail = result.retData.orderDetailList
        this.orderInfo = result.retData.orderInfo
        this.coupon = result.retData.couponPrice
    },
    methods: {
        async cancelOrder(){
            console.log(this.orderInfoId)
            this.$router.push({path:'/applyrefund', query:{id:this.orderInfoId}})
            // const result = await this.API.reqApplyRefund({userId:this.userId,token:this.token,orderInfoId:this.orderInfoId})
            // console.log(result)
            // if(result.retCode==='000'){
            //     this.$toast('订单取消成功')
            //     this.$router.go(-1)
            // }
            // if(result.retCode !== '000'){
            //     this.$toast(result.retData)
            // }
            // this.$toast.loading({
            //     mask: true, 
            //     message: '取消中...'
            // })
            // const result = await this.API.reqCancelOrder({userId:this.userId,token:this.token,orderInfoId:this.orderInfoId})
            // console.log('取消订单',result)
            // if(result.retCode === '000'){
            //     // this.$toast('订单取消成功')
            //     // 5s后再跳转到之前的页面
            //     setTimeout(()=>{
            //         this.$toast('订单取消成功')
            //         this.$router.go(-1)
            //     },2000)
            // }
        }
    }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.refund
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    height 100%
    .refund-title
        display flex
        align-items center
        width 100%
        height 70px
        background #145B3E
        color #fff
        img
            margin-left 20px
            margin-right 10px
            width 28px
            height 28px
    .refund-address
        width 100%
        height 65px
        background #fff
        padding-left 20px
        margin-bottom 10px
        .address-top
            height 25px
            line-height 25px
            font-size 14px
            padding-top 10px
            span
                margin-left 20px
        .address-bottom
            height 25px
            line-height 25px
            color #7A7A7A
            font-size 12px
    .refund-goods
        background #fff
        padding-left 20px
        padding-top 15px
        h2
            font-size 15px
            font-weight bold
        .container
            .collect_ul
                .collect_item
                    display flex
                    padding 20px 0
                    bottom-border-1px(#e4e4e4)
                    img
                        width 80px
                        height 80px
                        border-radius 5px
                    .title
                        display flex
                        flex-direction column
                        justify-content space-around
                        margin-left 20px
                        font-size 14px
                        .size
                            font-size 12px
                            color #838383
    .refund-charge
        overflow hidden
        margin-top 10px
        background #fff
        padding 10px 20px
        h2
            font-size 15px
            font-weight bold
            margin-bottom 10px
        .cell
            display flex
            justify-content space-between
            color #6B6B6B
            font-size 14px
            height 30px
            line-height 30px
        .pay
            margin-top 5px
            border-top 1px solid #EDEDED
            height 45px
            line-height 45px
            .paybt
                float right
                span
                    color red
    .refund-other
        margin-top 10px
        padding 10px 20px
        background #fff
        .cell
            display flex
            justify-content space-between
            color #6B6B6B
            font-size 14px
            height 25px
            line-height 25px
            p
                &.time
                    font-size 12px
        .cancel-btn
            border-top 1px solid #EDEDED
            height 45px
            display flex
            justify-content flex-end
            align-items center
            margin-top 5px
            button
                margin 0
                padding 0
                outline none
                background #fff
                color #6B6B6B
                border 1px solid #EDEDED
                height 27px
                width 75px
                font-size 12px
                border-radius 3px
                margin-left 5px
</style>